<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/9/30
  Time: 15:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax上传</title>
<%--      导入在线的jquery库文件--%>
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <h1> Ajax上传，通过构造FormData对象，使用Ajax提交.</h1>
       <!-- 文件域 同时支持多文件上传 multiple 多文件 accept="image/jpeg" 支持jpg格式图片,选择图片过滤 ,name="myfile"  记得要和后端参数名一致-->
       请选择: <input type="file" id="myfile" name="myfile" multiple accept="image/jpeg">

<%--    按钮注释掉，备用--%>
<%--       <input type="button" id="upload" value="上传">--%>

  <script>
      $(function(){
          //找事件 ->input type file的对象的change事件
          $("#myfile").change(function (e){
              //构造一个FormData对象
              let formData =new  FormData();
              //得到一个file对象->存储的是选择文件的集合(数组)
              let files = e.target.files;
              //输出看看
              console.log(files);

              //单文件处理
              if(files.length == 0){
                  //单个元素直接取得第一个文件,myfile是key的值,files[0]就是value
                  formData.append("myfile",files[0]);
              }
              else if(files.length >0)
              //多文件处理
              {
                  for (let i = 0; i < files.length; i++) {
                      ////多个元素依次获取文件,myfile是key的值,files[]就是value
                      formData.append("myfile",files[i]);
                  }

              }

              console.log("formdata: "+formData);

              //ajax请求

                  $.ajax({
                      type: "post",
                      url: "uploadImg2/",
                      data: formData,
                      cache: false,
                      contentType: false,
                      //processData 默认值是true,jquery会序列化数据,false,jquery不处理
                      processData: false,
                  }).success(function (data){
                      alert(data);
                  }).error(function (){
                      alert("上传失败");
                  });
          });

      });

  </script>
  </body>
</html>
